@page "/Percent_Stacked_Area_Chart"

<AntDesign.Charts.Area Data=data1 Config="config1" />

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <AntDesign.Charts.Area @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }

    #region 示例1

    object[] data1 = new object[] {
        new  {
    country= "Asia",
    year= "1750",
    value= 502,
  },
        new  {
    country= "Asia",
    year= "1800",
    value= 635,
  },
        new  {
    country= "Asia",
    year= "1850",
    value= 809,
  },
        new  {
    country= "Asia",
    year= "1900",
    value= 947,
  },
        new  {
    country= "Asia",
    year= "1950",
    value= 1402,
  },
        new  {
    country= "Asia",
    year= "1999",
    value= 3634,
  },
        new  {
    country= "Asia",
    year= "2050",
    value= 5268,
  },
        new  {
    country= "Africa",
    year= "1750",
    value= 106,
  },
        new  {
    country= "Africa",
    year= "1800",
    value= 107,
  },
        new  {
    country= "Africa",
    year= "1850",
    value= 111,
  },
        new  {
    country= "Africa",
    year= "1900",
    value= 133,
  },
        new  {
    country= "Africa",
    year= "1950",
    value= 221,
  },
        new  {
    country= "Africa",
    year= "1999",
    value= 767,
  },
        new  {
    country= "Africa",
    year= "2050",
    value= 1766,
  },
        new  {
    country= "Europe",
    year= "1750",
    value= 163,
  },
        new  {
    country= "Europe",
    year= "1800",
    value= 203,
  },
        new  {
    country= "Europe",
    year= "1850",
    value= 276,
  },
        new  {
    country= "Europe",
    year= "1900",
    value= 408,
  },
        new  {
    country= "Europe",
    year= "1950",
    value= 547,
  },
        new  {
    country= "Europe",
    year= "1999",
    value= 729,
  },
        new  {
    country= "Europe",
    year= "2050",
    value= 628,
  },
};

    AreaConfig config1 = new AreaConfig()
    {
        Meta = new
        {
            Year = new
            {
                Range = new int[] { 0, 1 },
            },
        },
        XField = "year",
        YField = "value",
        SeriesField = "country",
        Color = new string[] { "#82d1de", "#cb302d", "#e3ca8c" },
        AreaStyle = new GraphicStyle
        {
            FillOpacity = 0.7M,
        },
        IsPercent = true,
    };

    #endregion 示例1

}



